<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>价格</th>
        <th>颜色</th>
    </tr>
</table>
<script>
  // 实例化一个空对象
  let p1 = {};
  // JS中允许动态添加属性和方法(Java不支持)
  p1.name = "张三";
  p1.age = 18;
  p1.run = function() {
    console.log(this.name + ":" +this.age);
  }
  // 调用方法
  p1.run();
  // 实例化一个自带属性和方法的对象
  let p2 = {
    name: "李四", age: 30, run: function() {
      console.log(this.name + ":" + this.age);
    }
  }
  p2.run();

  // 用对象封装一个商品信息
  let product = {title: "斯伯丁篮球", price: 108, color: "红色"};
  // 用数组装多个对象, 这样数组里面就有多个商品的信息了
  let arr = [{title: "斯伯丁篮球", price: 108, color: "红色"},
          {title:"威尔逊篮球", price: 158, color: "花色"},
    {title: "李宁篮球", price: 98, color: "蓝色"}];
  // 得到table
  let t = document.querySelector("table");
  // for循环遍历数组
  for(let p of arr) {
      //创建tr和3个td
      let tr = document.createElement("tr");
      let titleTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let colorTd = document.createElement("td");
      // 把当前遍历的商品中的数据填到td中
      titleTd.innerText = p.title;
      priceTd.innerText = p.price;
      colorTd.innerText = p.color;
      //把3个td装进tr
      tr.append(titleTd, priceTd, colorTd);
      // 把tr装进table
      t.append(tr);
  }


</script>

</body>
</html>